<template>
  <div class="editUserInfo">
    <hmheader title="个人信息编辑">
      <!-- slot:指定内容放置到那个插槽中 -->
      <span
        slot="left"
        class="iconfont iconjiantou2"
        @click="$router.back()"
      ></span>
      <span
        slot="right"
        class="van-icon van-icon-wap-home-o"
        @click="$router.push({ path: '/index/' + $route.params.id })"
      ></span>
    </hmheader>
    <div class="userimg">
      <img :src="current.head_img" alt="" />
      <!-- 文件上传组件 -->
      <van-uploader :after-read="afterRead" />
    </div>
    <hmcell title="昵称" :desc="current.nickname" @click="nickshow = !nickshow">
    </hmcell>
    <van-dialog
      v-model="nickshow"
      title="昵称"
      show-cancel-button
      @cancel="editvalue.nickname = current.nickname"
      @confirm="updateNickname"
    >
      <van-field
        v-model="editvalue.nickname"
        label="文本"
        required
        placeholder="请输入用昵称"
      />
    </van-dialog>

    <hmcell title="密码" desc="*****" @click="passshow = !passshow"></hmcell>
    <van-dialog
      v-model="passshow"
      title="标题"
      show-cancel-button
      @cancel="editvalue.originpass = editvalue.newpass = ''"
      @confirm="updatePass"
    >
      <van-field
        v-model="editvalue.originpass"
        label="原密码"
        required
        placeholder="请输入原密码"
      />
      <van-field
        v-model="editvalue.newpass"
        label="新密码"
        required
        placeholder="请输入新密码"
      />
    </van-dialog>
    <hmcell
      title="性别"
      :desc="current.gender == 1 ? '男' : '女'"
      @click="showPicker = !showPicker"
    ></hmcell>
    <van-popup
      v-model="showPicker"
      round
      position="bottom"
      @confirm="updateGender"
      @cancel="editvalue.gender = current.gender"
    >
      <van-picker
        show-toolbar
        :columns="columns"
        :default-index="current.gender"
        @change="genderChange"
        @confirm="updateGender"
        @cancel="
          editvalue.gender = current.gender;
          showPicker = !showPicker;
        "
      />
    </van-popup>
  </div>
</template>

<script>
import hmheader from "@/components/hmheader";
import { edit_profile, updateUserInfo } from "@/apis/user";
import hmcell from "@/components/hmcell";
import axios from "@/utils/myaxios";
import { uploadFile } from "@/apis/upload.js";
export default {
  data() {
    return {
      current: {},
      editvalue: {
        originpass: "", //原密码
        newpass: "", //新密码
      },
      nickshow: false,
      passshow: false,
      showPicker: false,
      columns: ["男", "女"],
    };
  },
  components: {
    hmheader,
    hmcell,
  },
  methods: {
    // 文件上传及头像编辑
    async afterRead(myfile) {
      // 收集数据
      let formdata = new FormData();
      formdata.append("file", myfile.file);
      // 1.实现文件上传
      let res = await uploadFile(formdata);
      console.log(res);
      // 下面这句本质上实现了页面的刷新
      this.current.head_img = axios.defaults.baseURL + res.data.data.url;
      if (res.data.message == "文件上传成功") {
        // 2.编辑用户头像
        let res2 = await updateUserInfo(this.current.id, {
          head_img: res.data.data.url,
        });
        this.$toast.success("用户头像修改成功");
        console.log(res2);
      }
    },
    // 编辑昵称
    async updateNickname() {
      let res = updateUserInfo(this.current.id, {
        nickname: this.editvalue.nickname,
      });
      console.log(res);
      this.current.nickname = this.editvalue.nickname;
      this.$toast.success("用户昵称修改成功");
    },
    // 修改密码
    async updatePass() {
      //  取到本地储存的密码
      let userobj = JSON.parse(localStorage.getItem("toutiao_59"));
      //判断原密码是否匹配
      if (this.editvalue.originpass == userobj.password) {
        // 新密码需要进行验证
        if (/^.{3,}$/.test(this.editvalue.newpass)) {
          if (this.editvalue.newpass !== userobj.password) {
            // 用户输入的新密码通过验证
            // 修改密码
            let res = await updateUserInfo(this.current.id, {
              password: this.editvalue.newpass,
            });
            this.$toast.success("用户密码修改成功");
            //更新数据
            userobj.password = this.editvalue.newpass;
            // 重新存储
            localStorage.setItem("toutiao_59", JSON.stringify(userobj));
            // 清空
            this.editvalue.originpass = this.editvalue.newpass = "";
          } else {
            this.$toast.fail("输入的密码不能和原密码一样");
          }
        } else {
          this.$toast.fail("请输入3位及以上的新密码");
        }
      } else {
        this.$toast.fail("原密码输入不正确");
      }
    },
    // 修改性别
    updateGender() {
      let res = updateUserInfo(this.current.id, {
        gender: this.editvalue.gender,
      });
      // 实现页面刷新
      this.current.gender = this.editvalue.gender;
      this.$toast.success("用户性别修改成功");
      this.showPicker = !this.showPicker;
      console.log(this.current);
    },
    genderChange(q, qq, index) {
      // console.log(this.editvalue);
      this.editvalue.gender = index;
      console.log(index);
    },
  },
  async mounted() {
    let res = await edit_profile(this.$route.params.id);
    console.log(res);
    if (res.data.message == "获取成功") {
      res.data.data.head_img = axios.defaults.baseURL + res.data.data.head_img;
      this.current = res.data.data;
      this.editvalue.nickname = this.current.nickname;
    }
  },
};
</script>

<style lang="less" scoped>
.userimg {
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  img {
    width: 100 / 360 * 100vw;
    height: 100 / 360 * 100vw;
    border-radius: 50%;
  }
  /deep/ .van-uploader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  /deep/ .van-uploader__upload {
    width: 100 / 360 * 100vw;
    height: 100 / 360 * 100vw;
    margin: 0;
  }
}
</style>